import React, { useState } from 'react'
import { Layout, Menu, Button, Input, Steps } from 'antd';

import Guide from './guide/guide'
import Preview from './preview/preview';
import Feature from './feature/feature';
import Machine from './machine/machine';
import Report from './report/report';
import Save from './save/save';

const { Content, Sider } = Layout;
const { Step } = Steps;

const Training = props => {

    const [id, setId] = React.useState(null);
    const [current, setCurrent] = React.useState(0);

    const steps = [
        {
            title: '数据预览',
            content: 'preview',
        },
        {
            title: '特征工程',
            content: 'feature',
        },
        {
            title: '模型训练',
            content: 'training',
        },
        {
            title: '分析报告',
            content: 'analysis',
        },
        {
            title: '模型保存',
            content: 'save',
        }
    ]

    /** 渲染步骤条 */
    function renderStep() {
        return steps.map(item => (
            <Step key={item.title} title={item.title} />
        ))
    }

    /**
     * 步骤条切换：向后切换需要确定当前步骤状态是否成功
     * @param {*} current 
     */
    function handleChange(current) {
        setCurrent(current);
    };

    /** 渲染模型训练的内容主体 */
    function renderContext (id) {
        // if (id === null) {
        //     return (
        //         <Guide />
        //     )
        // }
        /** TODO 后续改成动态路由跳转 */ 
        let step = current === 0 ? <Preview /> 
                                 : current === 1 ? <Feature />
                                 : current === 2 ? <Machine />
                                 : current === 3 ? <Report />
                                 : <Save />
        return (
            <>
                <Steps
                    type="navigation"
                    size="small"
                    current={current}
                    onChange={current => handleChange(current)}
                >
                    { renderStep() }
                </Steps>
                {step}
            </> 
        )
    }

    return (
        <Layout>
            <Sider width={200}>
                <Menu
                    mode="inline"
                    defaultSelectedKeys={['1']}
                    defaultOpenKeys={['sub1']}
                    style={{ height: 'calc(88vh)', overflow: 'scroll' }}
                    // onClick={clickFunc}
                >
                    
                    <div className='sider-input'>
                        <Input />
                        <Button type="primary" >新建</Button>
                    </div>
                </Menu>
            </Sider>
            <Content>
                { renderContext(id) }
            </Content>
        </Layout>
    )
}

export default Training